<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设置我的资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">设置我的资料</div>
                <div class="layui-card-body">
                    <div class="layui-form" lay-filter="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">工号</label>
                            <div class="layui-input-inline">
                                <input type="text" id="employeeId" value="" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="employeeRealName" value="" class="layui-input"
                                       lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像</label>
                            <div class="layui-input-inline">
                                <img id="employeeIcon" src="/download/icon.jpg" width="80px" height="80px">
                                <button type="button" class="layui-btn layui-btn-sm" id="uploadPhoto">
                                    <i class="layui-icon">&#xe67c;</i>上传头像
                                </button>
                            </div>
                            <div class="layui-form-mid layui-word-aux">图片大小不超过1MB</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机</label>
                            <div class="layui-input-inline">
                                <input type="text" id="employeePhone" value="" class="layui-input"
                                       lay-verify="required|phone">
                            </div>
                            <div class="layui-form-mid layui-word-aux">手机号为您的账号，请注意保存</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色</label>
                            <div class="layui-input-inline">
                                <select id="employeeRole_Id" lay-verify="required">
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="employeeSex" value="0" title="男" checked>
                                <input type="radio" name="employeeSex" value="1" title="女">
                            </div>
                        </div>
                        <!--                        <div class="layui-form-item">-->
                        <!--                            <label class="layui-form-label">生日</label>-->
                        <!--                            <div class="layui-input-inline">-->
                        <!--                                <input type="text" id="employeeBirthday" value="" class="layui-input">-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">地址</label>
                            <div class="layui-input-inline">
                                <textarea name="remarks" id="employeeAddress" lay-verify="required" placeholder="请输入内容"
                                          class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">身份证号</label>
                            <div class="layui-input-inline">
                                <input type="text" id="employeeIDNumber" lay-verify="required|identity" value=""
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="employee-submit">修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../../layuiadmin/layui/layui.js"></script>
<script src="/background/js/jquery-1.8.3.min.js"></script>
<script src="/background/js/jquery.cookie.min.js"></script>
<script>
    //下拉框初始化
    $.ajax({
        url: '/role/toAdd',
        type: 'get',
        dataType: 'json',
        data: {},
        async: false,//设置阻断
        success: function (data) {
            if (data.status != 200) {
                layer.msg('查询失败！');
            } else {
                //将下拉框中添加数据
                var modelList = data.data;
                if (modelList && modelList.length != 0) {
                    for (var i = 0; i < modelList.length; i++) {
                        var option = "<option value=\"" + modelList[i].id + "\"";
                        option += ">" + modelList[i].name + "</option>";  //动态添加数据
                        $('#employeeRole_Id').append(option);
                    }
                }
            }
        }
    });

    // 获取指定名称的cookie
    function getCookie(name) {
        var strcookie = document.cookie;//获取cookie字符串
        var arrcookie = strcookie.split("; ");//分割
        //遍历匹配
        for (var i = 0; i < arrcookie.length; i++) {
            var arr = arrcookie[i].split("=");
            if (arr[0] == name) {
                return arr[1];
            }
        }
        return "";
    }

    $.ajax({
        url: '/employee/findOne',
        type: 'post',
        dataType: 'json',
        async: false,//设置阻断
        data: {"id": getCookie('userId')},
        success: function (data) {
            //选中下拉框中的option
            $("#employeeRole_Id").find("option[value=" + data.data.role_id + "]").prop("selected", true);
            //修改性别radio
            if (data.data.sex == 1) {
                $("input[name=employeeSex][value='1']").prop("checked", "true");
            }
            $("#employeeId").val(data.data.id);
            $("#employeeRealName").val(data.data.realname);
            $("#employeePhone").val(data.data.phone);
            $("#employeeRole_Id").find("option[value=" + data.data.role_id + "]").prop("selected", true);
            if (data.data.icon != null) {
                $("#employeeIcon").attr("src", "/download/" + data.data.icon);
            }
            // $("#employeeBirthday").val(data.data.birthday);
            $("#employeeAddress").val(data.data.address);
            $("#employeeIDNumber").val(data.data.idnumber);
            $("#employeeRole_Id").attr("disabled", "disabled");
            //重新渲染表单元素
            layui.use('form', function () {
                var form = layui.form;
                form.render();
            });
        }
    })
</script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'set', 'laydate', 'layer', 'upload'], function () {
        var $ = layui.$
            , form = layui.form
            , laydate = layui.laydate
            , layer = layui.layer
            , upload = layui.upload;
        // //初始化日期组件
        // laydate.render({
        //     elem: '#employeeBirthday'
        // });
        var load;
        //初始化文件上传组件
        var uploadInst = upload.render({
            elem: '#uploadPhoto' //绑定元素
            , accept: 'images'
            , acceptMime: 'image/*'
            , method: 'post'
            , size: 1024
            , url: '/employee/uploadIcon' //上传接口
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                //上传loading
                load = layer.load(1, {
                    shade: [0.3, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index, upload) {
                layer.close(load);
                layer.msg(res.msg, {icon: res.icon, shade: 0.3, time: 1500}, function (index) {
                    parent.location.reload();
                });

            }
            , error: function () {
                layer.close(load);
                layer.msg("连接失败！")
            }
        });
        //监听提交
        form.on('submit(employee-submit)', function (data) {
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //获取id，若无则改为0
            var id = $("#employeeId").val();
            if (id == null || id == "") id = 0;
            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                url: "/employee/update",
                type: 'post',
                dataType: 'json',
                data: {
                    "id": id,
                    "realname": $("#employeeRealName").val(),
                    "phone": $("#employeePhone").val(),
                    "sex": $("input[type=radio][name=employeeSex]:checked").val(),
                    "birthday": "",
                    "address": $("#employeeAddress").val(),
                    "idnumber": $("#employeeIDNumber").val(),
                    "role_id": $("#employeeRole_Id").val(),
                    "is_status": 0
                },
                success: function (data) {
                    layer.msg(data.msg, {icon: data.icon, zIndex: layer.zIndex + 100});
                    location.reload();
                }
            });
        });
    });

</script>

</body>
</html>